/*  StepSlider 组件  */
.pile-step-slider{
  position: relative;overflow: hidden;width: 100%;padding:15px;background:@fill-base;
  .pile-slider-rule{
    position: relative;
    .line-bg,.line-light{height: 1px;position: absolute;top:0;left:0;background: #ebebeb;width: 100%;}
    .line-light{
      width: 50%;z-index:999;position: relative;background: @color-icon-base;
      .pole-btn{position: absolute;width: 0px;height: 0px;overflow: hidden;border-top:6px solid @color-icon-base;border-left:6px solid transparent;border-right:6px solid transparent;top:0;right:0;margin-right: -6px; }
    }
  }
  .step-wrap{
    height: 30px;position: relative;overflow: hidden;
    .step-line{
      width: 10000000px;position: relative;left:0;top:0;
      li{position: absolute;width: 1px;background: #ebebeb;height: 5px;top:0;left:0;}
      .over{background:@color-icon-base }
      .disabled{background: @fill-disabled}
    }
    .step-name{
      width: 10000000px;position: relative;left:0;top:0;
      li{
        position: absolute;width: 1px;background: @fill-btn-default;height: 10px;top:0;left:0;font-size: @font-size-base;color: @color-text-disabled;
        span.step-title{position: absolute;width: 60px;top:15px;left:-30px;text-align: center;}
      }
      li:after{content:"";position: absolute;top:0;left:0px;width: 1px;height: 10px;background: #ebebeb}
      .over{color:@color-icon-base}
      .over:after{background: @color-icon-base}
      .disabled{color:@color-text-disabled}
      .disabled:after{background: @fill-disabled}
    }
    .step-touch{position: absolute;top:0;left:0;width: 10000000px;height: 100%;-webkit-overflow-scrolling: touch;}
  }
}
/*  StepSlider 组件  */
.pile-car-stepSlider{
  position: relative;overflow: hidden;width: 100%;padding: 10px 0;background:@fill-base;
  .pile-slider{
    .slider-bnt{
      opacity: 0;
      z-index: 1000;
    }
    .line-bg,.line-light,.line-def{height: 1px;}
    .line-light{width: 50%;z-index:999;}
    .line-light:after{content:"";position: absolute;display: inline-block;width: 15px;height: 15px;box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);border-radius: 50%  50%  50% 0;background: @fill-base;right:-7px;top:-8px;-webkit-transform:rotate(-45deg);}
    .line-def{left:50%;position: relative;z-index: 100;background: @color-link-danger;top:14px;}
  }
  .step-wrap{
    height: 50px;
    .step-list{
      width: 10000000px;position: relative;
      li{
        float: left;
        text-align: center;z-index:99;
        position: relative;
        padding-top: 20px;
        span.home-title{
          font-size: @font-size-caption-sm;
        }
        i.rule-line{
          b{position: absolute;width: 1px;height: 6px;background:#999;top:4px;-webkit-transform: scaleX(.5);transform: scaleX(.5);}
          b:first-child{display: none;}
          b.step-line-over{background:@color-icon-base}
          b.step-line-disabled{background:@fill-btn-default}
          b.rule-end-line{height: 10px;top:0;left:auto;right:-1px;z-index:10;}
        }
        .price-line{position: absolute;top:-16px;left:0;width: 100%;height: 1px;background: #fa8919;z-index:10;}
      }
      li:first-child i b:first-child{display: block;height: 10px;top:0;}
      .step-over,.step-on {
        color: @color-icon-base;
      }
      li.step-current{
        color: @color-icon-base;
      }
      li:last-child i:after{background: @fill-btn-default}
    }
    .step-line-list{
      position: relative;height: 10px;
      .lines-layout{
        b{position: absolute;width: 1px;background:@color-text-light;height: 6px;top:6px;left:auto;-webkit-transform: scaleX(.5);transform: scaleX(.5);right:-1px;z-index:10;}
      }
    }
    .type-home-layout{
      position: relative;padding-top: 20px;
      .home-list{
        color: @color-text-base;
        position: absolute;
        width: 0px;text-align: center;
        .home-name{
          margin:0 auto;font-size: @font-size-caption-sm;
          position: relative;width: 0px;
          .vert-name{top:18px;position: absolute;width: 40px;left:-20px;}
          .vert-img{ top:-5px;position: absolute;height: 20px;left:-10px; }
        }
        .pos-lf .vert-name{left:-37px;}
        .pos-rt .vert-name{left:-3px;}
        .home-on{color: @color-icon-base}
        .home-over { color: #fa8919; }
        .home-name:after {content: "";position: absolute;width: 1px;background:@color-text-light;height: 10px;top:-18px;left:auto;left:0px;z-index:10;}
        .home-on:after{background: @color-icon-base}
        .home-over:after{background: #fa8919;z-index:10;}
        .home-disabled {
          color: @color-text-light;
          display: none;
        }
        .home-disabled::after {
          height: 0px;
        }
      }
    }
  }
}
.pile-car-stepSlider:after,.pile-car-stepSlider:before,.pile-step-slider:after,.pile-step-slider:before{width: 100px;height: 100%;content:"";position: absolute;top:0;left:0;z-index:9999;background-image: linear-gradient(to left, rgba(255, 255, 255, 0) 0%,rgba(255, 255,255, 0.9) 80%, #FFFFFF 95%, #FFFFFF 100%); }
.pile-car-stepSlider:before,.pile-step-slider:before{left:auto;right: 0;-webkit-transform:rotate(180deg);transform:rotate(180deg);}
